<template>
  <Form @submit="onSubmit" @failed="onFailed">
    <CellGroup title="" inset>
      <Field v-model.trim="form.name" label="名称" placeholder="" clearable autocomplete="no" />
      <Field v-model.trim="form.year" type="number" label="年份" placeholder="" clearable autocomplete="no"/>
    </CellGroup>
    <div style="margin: 16px;">
      <Button round block type="primary" native-type="submit" loading-type="spinner" :loading="submitting">
        识 别
      </Button>
    </div>


    <Popup v-model:show="recognizeShow" position="bottom" :style="{ height: '70%' }">
      <van-divider>共识别到{{recognizeList.length}}条结果</van-divider>
      <MediaList :data="recognizeList" @select="onSelect" />
    </Popup>
  </Form>
</template>
<script setup>
import { Form, Field, Cell, CellGroup, Button, Popup, Notify, Dialog, Divider as VanDivider } from 'vant';
import { reactive, ref } from 'vue';

import MediaList from '@/mobile/Torrent/components/MediaList.vue';
import TorrentApi from '@/api/TorrentApi.js';
const props = defineProps(['id']);

const emits = defineEmits(['close']);

const form = reactive({
  name: '',
  year: '',
});

const submitting = ref(false);
const recognizeList = ref([]);
const recognizeShow = ref(false);
const recognized = ref(false);
const onSubmit = (values) => {
  submitting.value = true;
  TorrentApi.recognize({ id: props.id, ...form }).then(response => {
    if (response.data.code === 1) {
      recognizeList.value = response.data.data
      recognizeShow.value = true
      // Notify({ type: 'success', message: '操作成功' });
    } else {
      Notify({ type: 'danger', message: `操作失败：${response.data.message}` });
    }
  }).catch((error) => {
    Notify({ type: 'danger', message: `操作失败：${error.message}` });
  }).then(() => {
    submitting.value = false;
  })
};

const onFailed = (errorInfo) => {
  // console.log('failed', errorInfo);
  // Notify({ type: 'danger', message: `识别失败：${errorInfo.errors.message}` });
};

const onSelect = (item) => {
  Dialog.confirm({
    title: '确认识别为',
    message: `TMDB ID: ${item.id}\n名称: ${item.title}\n年份: ${item.year.split('-')[0]}`,
    beforeClose: (action) =>
      new Promise((resolve) => {
        if (action === 'confirm') {
          TorrentApi.recognizeConfirm({ modelId: props.id, ...item }).then(response => {
            if (response.data.code === 1) {
              planForm();
              recognizeShow.value = false;
              emits('close', item)
              Notify({ type: 'success', message: '操作成功' });
              resolve(true);
            } else {
              Notify({ type: 'danger', message: `操作失败：${response.data.message}` });
              resolve(false);
            }
          }).catch((error) => {
            Notify({ type: 'danger', message: `操作失败：${error.message}` });
            resolve(false);
          })
        } else {
          // 取消操作
          resolve(true);
        }

      })
  }).catch(e=>{
    console.log(e);
  })
}

const planForm = () => {
  form.name = '';
  form.year = '';
}

  // init functions

</script>